<template>
	<gui-page :refresh="true" @reload="reload" :loadmore="true" @loadmorefun="loadData"
		:apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gFixedTop>
			<gui-a-header title="线上课件"></gui-a-header>
			<view class="bgfff">
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :customClass="['bgfff','border']" height="53rpx" placeholder="输入关键字，搜索您想要的"
							placeholderClass="plStyle" :kwd="query.title" @confirm="confirm" @clear="clear"
							@inputting="inputting"></gui-search2>
					</view>
					<button class="saveBtn" @click="search">搜索</button>
				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<gui-empty v-if="noData">
				<template v-slot:img>
					<view class="gui-flex gui-rows gui-justify-content-center">
						<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png" mode="widthFix">
						</image>
					</view>
				</template>
				<template v-slot:text>
					<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
					<view style="height: 200rpx;"></view>
				</template>
			</gui-empty>
			<view class="list bgfff">
				<view class="post-list">
					<view class="onlineClass-list" @click="$u.to(`/pages/index/courseware-details?curId=${item.id}`)"
						v-for="(item,index) in dataList" :key="item.id">
						<view class="item flex-ac-jb">
							<view class="onlineClass-headImg">
								<gui-image :src="item.image" :width="146" :height="113" borderRadius="14rpx"
									mode="aspectFill"></gui-image>
							</view>
							<view class="onlineClass-info flex-dc flex1">
								<text class="f30">{{item.title}}</text>
								<text class="f24 c666">{{item.synopsis}}</text>
							</view>
							<text class="gui-icons colorBlue">&#xe601;</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		getCourseWareList
	} from '@/api/user.js'
	import graceJS from "@/Grace6/js/grace.js"
	import ScreenPostCom from "@/components/Screen-post-com/Screen-post-com.vue"
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const guipage = ref(null);
	const mainHeight = ref(200);
	const apiLoadingStatus = ref(false);
	const $u = reactive(inject('$u'))

	const reload = (isRelad = true) => {
		query.value.pageNum = 1;
		loadData(isRelad)
	}

	onLoad((option) => {
		// 01. 获取页面主体高度
		setTimeout(() => {
			graceJS.getRefs(guipage, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					mainHeight.value = (e.height - uni.upx2px(10));
				});
			});
		}, 1000)
		if (option.searchVal) {
			query.value.title = option.searchVal;
		}
		loadData();
	})

	const query = ref({
		pageNum: 1,
		pageSize: 10,
		coursewareTypeId: '',
		title: ''
	})

	// 搜索框输入
	const inputting = (e) => {
		query.value.title = e;
	}
	// 搜索框确认
	const confirm = (e) => {
		console.log(e);
		query.value.title = e;
		reload(false);
	}
	// 搜索清空
	const clear = (e) => {
		query.value.title = '';
		reload(false);
	}

	const search = () => {
		reload(false);
	}

	const noData = ref(false);
	const dataList = ref([])

	// 查询
	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		apiLoadingStatus.value = true;
		getCourseWareList(queryParam).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				}
				else {
					dataList.value = [];
					dataList.value = resultArr;
					// 刷新
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				query.value.pageNum++;
			}
		}).finally(() => {
			apiLoadingStatus.value = false;
		})
	}
</script>

<style lang="scss">
	.search {
		padding: 28rpx 14rpx 24rpx 36rpx;

		.border {
			border: 1px solid #ccc;
		}

		.saveBtn {
			width: 97rpx;
			height: 53rpx;
			margin-left: 10rpx;
			font-size: 20rpx;
		}
	}

	.list {
		margin-top: 10rpx;
	}

	.onlineClass-list {
		.item {
			padding: 30rpx 47rpx 30rpx 53rpx;
			border-bottom: 1px solid #F5F5F5;

			.onlineClass-headImg {}

			.onlineClass-info {
				margin: 0 20rpx;

				.f24 {
					margin-top: 10rpx;
				}
			}

			.gui-icons {
				font-size: 40rpx;
			}
		}
	}
</style>